<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="年度">
              <!-- <a-date-picker v-model="queryParam.shijian" /> -->
              <a-date-picker style="width:100%" :open='yearShowOne' @openChange="openChangeOne"
                @panelChange="panelChangeOne" mode="year" format="YYYY" type="date"
                :default-value="moment(new Date(), 'YYYY')" v-model="queryParam.sbnd" suffix-icon=" "
                placeholder="年份" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- table区域-begin -->
    <div>
      <a-table ref="table" size="middle" :scroll="{ x: true }" bordered rowKey="id" :columns="columns"
        :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
        @change="handleTableChange">
        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
            style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="downloadFile(text)">
            下载
          </a-button>
        </template>
        <template slot="pfzt" slot-scope="text, record">
          <span v-if="record.pfzt == '1'" style="color: #48862C">已提交</span>
          <span v-else style="color: #F83F3D">未提交</span>
        </template>
        <template slot="pfyl" slot-scope="text, record">
          <a v-if="record.pfzt == '1'">
            <img style="width:18px;height:18px;margin-right:22px;" @click="ratingPreview(record)"
              src="@/assets/img/yulan.png" alt="">
          </a>
        </template>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>

          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item>
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>
    <cxj-jscs-fz-xm-modal ref="modalForm" @ok="modalFormOk"></cxj-jscs-fz-xm-modal>
    <!-- pdf -->
    <view-pdf :params="pafParams" :showPdf="showpdf"></view-pdf>
  </a-card>
</template>

<script>
import viewPdf from '@/views/cxj/viewPdf'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import CxjJscsFzXmModal from './modules/CxjJscsFzXmModal'
import { filterObj } from '@/utils/util';
import moment from 'moment'
import {
  getAction
} from "@/api/manage"
import {
  sysCxjFlCxjsbList
} from "@/api/api"
export default {
  name: 'CxjJscsZjpfqkZg',
  mixins: [ mixinDevice ],
  components: {
    CxjJscsFzXmModal,
    viewPdf
  },
  data() {
    return {
      description: '专家评分情况职工表管理页面',
      fileStatus: '',
      loading: false,
      showpdf: false,
      yearShowOne: false,
      sbnd: moment(new Date()).format('YYYY'),
      pafParams: {},
      queryParam: {},
      dictOptions: {},
      dataSource: [],
      cxjSbList: [],
      superFieldList: [],
      selectedRowKeys: [],
      selectionRows: [],
      url: {
        // list: '/cxj/cxjJscsFz/cxjcs_fzlist_zg'
        list: "/cxj/cxjJscsFz/cxjcs_jscsZjPsqk"
      },
      isorter: {
        column: 'createTime',
        order: 'desc',
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30'],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '成果类别',
          align: "center",
          dataIndex: 'fl_id',
          customRender: (id) => {
            const categoryMap = {
              '11': '技术成果',
              '21': '系统成果',
              '31': '标准成果',
              '41': '信息化成果',
              '51': '专利成果',
              '61': '职工成果'
            };
            return categoryMap[id] || '--';
          }
        },
        {
          title: '分组名称',
          align: "center",
          dataIndex: 'jscs_fz_mc'
        },
        {
          title: '专家姓名',
          align: "center",
          dataIndex: 'zj_xm'
        },
        {
          title: '手机号',
          align: "center",
          dataIndex: 'zj_sj'
        },
        {
          title: '总任务',
          align: "center",
          dataIndex: 'zsl'
        },
        {
          title: '已打分',
          align: "center",
          dataIndex: 'ypf'
        },
        {
          title: '未打分',
          align: "center",
          dataIndex: 'wpf',
        },
        {
          title: '评分状态',
          align: "center",
          dataIndex: 'pfzt',
          scopedSlots: { customRender: 'pfzt' },
        },
        {
          title: '评分预览',
          align: "center",
          dataIndex: 'pfyl',
          scopedSlots: { customRender: 'pfyl' }
        },
      ],
    }
  },
  created() {
    this.$set(this.dictOptions, 'isValid', [{ text: '是', value: 'Y' }, { text: '否', value: 'N' }])
    this.getSuperFieldList();
    this.getsysCxjFlCxjsbList();
    this.loadData();
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    },
  },
  methods: {
    moment,
    // 评分预览
    ratingPreview(data) {
      this.pafParams = {
        fzid: data.cxj_jscs_fz_id,
        zjid: data.sys_zj_id,
        shijian: data.shijian
      }
      this.showpdf = !this.showpdf
    },
    // 获取成果类别
    getsysCxjFlCxjsbList() {
      sysCxjFlCxjsbList(null).then(res => {
        if (res.success) {
          this.cxjSbList = res.result;
        }
      })
    },
    /* 获取列表固定格式开始 */
    getQueryField() {
      //TODO 字段权限控制
      var str = "id,";
      this.columns.forEach(function (value) {
        str += "," + value.dataIndex;
      });
      return str;
    },
    // 获取分组项目
    loadData(arg) {
      if (!this.url.list) {
        this.$message.error("请设置url.list属性!")
        return
      }
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      var params = this.getQueryParams();//查询条件
      params.flid = '61'
      this.loading = true;
      // 分组id
      getAction(this.url.list, params).then((res) => {
        if (res.success) {
          //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          this.dataSource = res.result.records || res.result;
          if (res.result.total) {
            this.ipagination.total = res.result.total;
          } else {
            this.ipagination.total = 0;
          }
          //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
        }
        if (res.code === 510) {
          this.$message.warning(res.message)
        }
        this.loading = false;
      }).catch(() => {
        this.loading = false
      })
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
    },
    modalFormOk() {
      // 新增/修改 成功时，重载列表
      this.loadData();
      //清空列表选中
      this.onClearSelected()
    },
    handleTableChange(pagination, filters, sorter) {
      //分页、排序、筛选变化时触发
      //TODO 筛选
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field;
        this.isorter.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.ipagination = pagination;
      this.loadData();
    },

    getQueryParams() {
      //获取查询条件
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      this.queryParam.sbnd = this.sbnd;
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters);
      param.field = this.getQueryField();
      param.pageNo = this.ipagination.current;
      param.pageSize = this.ipagination.pageSize;
      return filterObj(param);
    },
    handleAdd: function () {
      this.$refs.modalForm.add();
      this.$refs.modalForm.title = "新增";
      this.$refs.modalForm.disableSubmit = false;
    },
    handleEdit: function (record) {
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "编辑";
      this.$refs.modalForm.disableSubmit = false;
    },
    searchQuery() {
      this.loadData(1);
    },
    searchReset() {
      this.queryParam = {};
      // this.flid = "";
      this.sbnd = moment(new Date()).format('YYYY');
      this.queryParam.sbnd = this.sbnd;
      this.loadData(1);
    },
    /* 获取列表固定格式结束 */


    /* 年份控制开始 */

    openChangeOne(status) {
      //status是打开或关闭的状态
      if (status) {
        this.yearShowOne = true;
      }
    },
    // 得到年份选择器的值
    panelChangeOne(value) {
      // params.sbnd = value;
      this.sbnd = moment(value).format('YYYY');
      this.queryParam.sbnd = this.sbnd;
      this.yearShowOne = false
    },






    initDictConfig() { },
    getSuperFieldList() {
      let fieldList = [];
      fieldList.push({ type: 'string', value: 'cxjJscsFzId', text: '技术初审分组ID', dictCode: '' })
      fieldList.push({ type: 'string', value: 'cxjCxjId', text: '项目ID', dictCode: '' })
      fieldList.push({ type: 'string', value: 'shijian', text: '年度', dictCode: '' })
      fieldList.push({ type: 'string', value: 'bz1', text: '备注1', dictCode: '' })
      fieldList.push({ type: 'string', value: 'bz2', text: '备注2', dictCode: '' })
      fieldList.push({ type: 'switch', value: 'isValid', text: '是否有效' })
      this.superFieldList = fieldList
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>